<template>
  <div>
    <div class="nav">
      <div class="b1" @click="back"></div>
      <div class="b2">猫眼电影</div>
      <div class="b3"></div>
    </div>
    <div class="login-container">
      <div class="phone-wrapper">
        <input
          type="text"
          name=""
          id=""
          placeholder="请输入手机号"
          @input="input"
          v-model="phone"
        />
        <div class="send-btn">
          <span class="send-btn-text" :class="this.sendable ? 'ac-text' : ''"
            >发送验证码</span
          >
        </div>
      </div>
      <div class="check-num">
        <input
          type="number"
          name=""
          id=""
          placeholder="请输入短信验证码"
          v-model="num"
          @input="inputNum"
        />
      </div>
      <div class="login-btn-wrapper">
        <div
          class="login-btn"
          @click="login"
          :class="this.loginable ? 'login-btn ac-btn' : 'login-btn'"
        >
          登录
        </div>
      </div>
      <div class="confirm">
        <label for="">
          <input type="checkbox" v-model="agreen" />
        </label>
        <div class="copyright">
          <span>我已阅读并同意</span>&nbsp;
          <a href="">猫眼用户服务协议</a>&nbsp;&nbsp;
          <a href="">隐私政策</a>
          <div style="text-align: center">
            <span>客服电话：</span>
            <a>1010-5335</a>
          </div>
        </div>
      </div>
      <div class="propmpt-text">未注册的手机号将自动生成新账号</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      phone: "",
      num: "",
      sendable: false,
      loginable: false,
      agreen: false,
      canLogin: true,
    };
  },
  methods: {
    login() {
      if (!this.agreen) {
        alert("请阅读协议并同意！");
      } else {
        alert("登录成功");
        localStorage.setItem("user", "cmf");
        this.$router.push("/my");
      }
    },
    back() {
      this.$router.back();
    },
    input() {
      let reg = /^1[34578]\d{9}$/;
      if (reg.test(this.phone)) {
        this.sendable = true;
      } else {
        this.sendable = false;
      }
    },
    inputNum() {
      if (this.num.length === 4 && this.sendable) {
        this.loginable = true;
      } else {
        this.loginable = false;
      }
    },
  },
};
</script>

<style scoped>
.ac-text {
  color: #df2d2d;
}
.ac-btn {
  background: #df2d2d !important;
  color: #fff;
}
.nav {
  position: fixed;
  top: 0px;
  width: 10rem;
  background-color: #df2d2d;
  display: flex;
  justify-content: space-between;
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #fff;
  align-items: center;
  z-index: 9;
}

.b1 {
  width: 2.6667rem;
  height: 39px;
}
.b1:before {
  content: "";
  display: block;
  position: absolute;
  left: 15px;
  top: 20px;
  width: 0.35rem;
  height: 0.35rem;
  border-bottom: 0.02rem solid #fff;
  border-left: 0.02rem solid #fff;
  transform: scaleY(0.7) rotateZ(45deg);
}
.b2 {
  width: 4.3467rem;
  height: 38px;
  font-size: 18px;
  line-height: 38px;
}

.b3 {
  width: 2.6667rem;
  height: 38px;
  line-height: 38px;
}

.b3 img {
  width: 17px;
  height: 16px;
  margin-right: -60px;
}
.login-container {
  width: 10rem;
  height: 500px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
}
.phone-wrapper {
  width: 90%;
  height: 1.0667rem;
  margin-top: 109px;
  padding-left: 20px;
  position: relative;
  border-bottom: 1px solid #e5e5e5;
  line-height: 1rem;
}
.check-num {
  width: 90%;
  height: 1.0667rem;
  padding-left: 20px;
  border-bottom: 1px solid #e5e5e5;
  line-height: 1rem;
  color: #cccccc;
}
input {
  border: none;
  outline: none;
  color: #333;
}
.send-btn {
  width: 2.4rem;
  height: 0.56rem;
  position: absolute;
  right: 0;
  top: 0;
}
input::placeholder {
  color: #cccccc;
}
.login-btn-wrapper {
  width: 9.04rem;
  height: 1.2rem;
  margin-top: 18px;
}
.login-btn {
  width: 100%;
  height: 100%;
  border-radius: 22.5px;
  background: #e5e5e5;
  margin-left: 20px;
  line-height: 45px;
  text-align: center;
  font-size: 16px;
}
.confirm {
  margin-top: 0.9333rem;
  width: 9.04rem;
  height: 1.2rem;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
label {
  width: 20px;
  height: 35px;
  flex: 1;
  text-align: center;
}
.copyright {
  width: 7.8133rem;
  height: 0.9333rem;
}
.copyright a {
  color: #df2d2d;
}
.propmpt-text {
  text-align: center;
  margin-top: 5px;
}
</style>